vanilla-framework

Vanilla Framework

A simple extensible CSS framework, written in Sass.

Vanilla Framework contains a basic CSS grid and pattern classes, and is designed to be extended either directly or by creating extension themes.

Project homepage | Documentation

Hotlinking

On the project homepage, find the link to the latest build to add directly into your markup:

<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-x.x.x.min.css" />

Local usage

Install the Node package into your project:

npm install vanilla-framework  # Installs at ./node_modules/vanilla-framework

Then reference it from your own Sass files, with optional settings:

// Optionally override some settings
$brand-color: #ffffff;

// Import the framework
@import "../node_modules/vanilla-framework/scss/vanilla";
// Run the framework
@include vanilla;

You can override any of the settings in _global-settings.scss.

If you don't want the whole framework, you can just @include specific modules - e.g. @include vf-forms.

Themes

• ubuntu-vanilla-theme (alpha)
• canonical-vanilla-theme (alpha)

Community

Keep up to date with all new developments and upcoming changes with Vanilla.

• Follow us on Twitter @UbuntuDesigners
• Read our latest blog posts at Canonical Blog
• Talk to the team in IRC on irc.freenode.com and join channel #canonical-webteam

Code licensed LGPLv3 by Canonical Ltd..

With ♥ from Canonical